<template>
  <view class="confirm-container">
    <u-modal
      class="confirm-modal"
      :show="true"
      :showConfirmButton="false"
    >
      <!-- 权限确认表单 -->
      <u-form
        :model="confirmForm"
        errorType="message"
        :rules="rules"
        ref="confirmFormRef"
      >
        <!-- 手机号 -->
        <u-form-item
          label="手机号"
          :required="true"
          labelWidth="50"
          prop="phone" 
          class="form-item"
        >
          <u--input
            v-model="confirmForm.phone"
            placeholder="请输入您的手机号以验证身份"
          ></u--input>
        </u-form-item>
        <!-- 权限确认按钮 -->
        <view class="confirm-button">
          <u-button
            type="primary"
            @click="handlesConfirm"
            >确认</u-button
          >
        </view>
      </u-form>
    </u-modal>
  </view>
</template>
<script>
  import { ERROR_TYPE, PERMISSION_FORM_RULES } from "@/common/constants";
  import { showMessage, showLoading, hideLoading } from "@/common/utils";
  import { ROUTE_PATHS } from "@/router/routes";

  export default {
    name: "Confirm",
    data() {
      return {
        /**
         * 权限确认表单
         * @type {object}
         * @property {string} phone 手机号
         */
        confirmForm: {
          phone: "",
        },
        rules: PERMISSION_FORM_RULES,
        redirect: "",
      };
    },
    onLoad(options) {
      this.redirect = options.redirect || ROUTE_PATHS.HOME;
    },
    methods: {
      /**
       * 确认专家身份
       */
      async handlesConfirm() {
        try {
          showLoading("确认中...");
          await this.$refs.confirmFormRef.validate();
          await this.$store.dispatch("professor/login", this.confirmForm);
          this.$Router.push({ path: this.redirect });
        } catch (error) {
          if (error.type === ERROR_TYPE.NETWORK) {
            return;
          }
          showMessage(error.msg || "登录失败，请检查输入是否有误", false);
        } finally {
          hideLoading();
        }
      },
    },
  };
</script>

<style lang="scss" scoped>
  .confirm-container {
    .confirm-button {
      margin: var(--margin-small) 0;
    }
  }
</style>
